<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>零部件相关性</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 98%; margin: 6px auto; }
        .header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;margin-top: 8px; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; }
        .btn { padding: 10px 15px; background-color: #007BFF; color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .btn:hover { background-color: #0056b3; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        table, th, td { border: 1px solid #ddd; }
        th, td { padding: 10px; text-align: left; }
        th { background-color: #f2f2f2; }
        .top-right-btn { position: absolute; top: 20px; right: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="ecuMapFeatureTable" lay-filter="ecuMapFeatureTable"></table>
        </div>
        <!-- 隐藏的文件选择框 -->
        <input type="file" id="ecuFile" accept=".xlsx, .xls" style="display: none;">
    </div>
    <script type="text/html" id="toolbarHeader">
       <button type="button" class="layui-btn  layui-btn-sm" onclick="addEcu()">
            <i class="layui-icon layui-icon-add-1"></i> 零部件(ECU)</button>
        <!-- 添加批量导入按钮 -->
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="uploadFile('ecuFile', 'EcuTable')">
            <i class="layui-icon" style="font-size: 16px; color: whitesmoke;">&#xe656;</i> 批量导入</button>

        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="startTARA()">
            <i class="layui-icon layui-icon-refresh"></i> 更新TARA分析 </button>
    </script>
    <script type="text/html" id="barDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
        </div>
    </script>

    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var windowHeight = window.innerHeight;
            var tableHeight = windowHeight - 20; // 减去其他元素的高度和一些边距
            // 渲染表格
            table.render({
                elem: '#ecuMapFeatureTable',
                url: '/getEcuMapFeatureTable',
                height: tableHeight,
                toolbar: '#toolbarHeader',
                page: true,
                limit: 20,
                limits: [20, 50, 100],
                even: true,
                cols: [[
                    {field: 'id', title: 'ID', width: 80, ssort: true, align: 'center', hide: true},
                    {type: 'numbers', title: '序号', width: 60, align: 'center', fixed: 'left'}, // 添加'序号'列
                    {field: 'name', title: '名称', width: 140, align: 'center', fixed: 'left'},
                    {field: 'abbr', title: '缩写', width: 100, align: 'center', fixed: 'left'},
                    {field: 'pcb', title: 'PCB', width: 80, align: 'center'},
                    {field: 'chipset', title: '芯片', width: 80, align: 'center'},
                    {field: 'Bootloader', title: 'Bootloader', width: 80, align: 'center'},
                    {field: 'OS', title: '操作系统', width: 90, align: 'center'},
                    {#{field: 'Linux', title: 'Linux系统', width: 90, align: 'center'},#}
                    {#{field: 'Windows', title: 'Windows系统', width: 120, align: 'center'},#}
                    {#{field: 'Andriod', title: 'Android系统', width: 120, align: 'center'},#}
                    {#{field: 'QNX', title: 'QNX系统', width: 90, align: 'center'},#}
                    {#{field: 'HarmonyOS', title: '鸿蒙系统', width: 120, align: 'center'},#}
                    {#{field: 'RTOS', title: '实时操作系统', width: 120, align: 'center'},#}
                    {field: 'app', title: '原生应用', width: 90, align: 'center'},
                    {field: 'app_3rd', title: '第三方应用', width: 120, align: 'center'},
                    {field: 'data_1', title: '重要数据', width: 90, align: 'center'},
                    {field: 'data_2', title: '个人数据', width: 90, align: 'center'},
                    {field: 'data_3', title: '关键数据', width: 90, align: 'center'},
                    {field: 'data_key', title: '密钥', width: 90, align: 'center'},
                    {field: 'data_car', title: '车辆识别数据', width: 90, align: 'center'},
                    {field: 'data_log', title: '日志', width: 90, align: 'center'},

                    {field: 'interface_usb', title: 'USB接口', width: 90, align: 'center'},
                    {field: 'interface_sd', title: 'SD卡接口', width: 90, align: 'center'},
                    {field: 'interface_debug', title: '调试接口', width: 90, align: 'center'},
                    {field: 'can_bus', title: 'CAN通信', width: 90, align: 'center'},
                    {field: 'eth_bus', title: '以太通信', width: 90, align: 'center'},
                    {field: 'wireless_bt', title: '蓝牙', width: 90, align: 'center'},
                    {field: 'wireless_wifi', title: 'WIFI', width: 90, align: 'center'},
                    {field: 'wireless_rf', title: '射频通信', width: 90, align: 'center'},
                    {field: 'wireless_mobile', title: '蜂窝通信', width: 90, align: 'center'},
                    {field: 'wireless_gnss', title: 'GNSS', width: 90, align: 'center'},
                    {field: 'wireless_v2x', title: 'V2X', width: 90, align: 'center'},
                    {field: 'ota_upgrade', title: 'OTA升级', width: 90, align: 'center'},
                    {field: 'usb_upgrade', title: 'USB升级', width: 90, align: 'center'},
                    {field: 'obd_upgrade', title: 'OBD升级', width: 90, align: 'center'},
                    {field: 'obd_debug', title: 'OBD诊断', width: 90, align: 'center'},
                    {field: 'remote_debug', title: '远程诊断', width: 90, align: 'center'},
                    {field: 'idps', title: 'IDPS', width: 80, align: 'center'},
                    {field: 'cal_level', title: 'CAL等级', width: 80, align: 'center'},
                    {fixed: 'right', title: '操作', width: 130, minWidth: 125, align: 'center', toolbar: '#barDemo'}
                ]],
                done: function () {
                    console.log('表格渲染完成');
                }
            });

            // 表格工具栏事件
            table.on('tool(ecuMapFeatureTable)', function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'edit':
                        editEcu(data);
                        break;
                    case 'delete':
                        deleteEcu(data.id);
                        break;
                }
            });

            // 更新TARA分析
            window.startTARA = function () {
                // 显示加载层
                var loadIndex = layer.load(2, {
                    shade: [0.3, '#000'] // 加载层的遮罩效果
                });

                // 调用后端接口 '/startTARA'
                fetch('/startTARA', {
                    method: 'POST'
                })
                .then(response => response.json())
                .then(data => {
                    // 关闭加载层
                    layer.close(loadIndex);

                    // 显示后端返回的消息
                    layer.msg(data.msg);
                })
                .catch(error => {
                    // 关闭加载层
                    layer.close(loadIndex);

                    // 显示错误消息
                    layer.msg('请求失败，请稍后再试');
                    console.error('Error:', error);
                });
            }

            // 添加ECU
            window.addEcu = function () {
                layer.open({
                    title: '添加零部件',
                    type: 2,
                    content: '/addEcuForm',
                    area: ['600px', '620px'],
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index];
                        var submitForm = iframeWindow.document.getElementById('ecuForm');
                        var formData = new FormData(submitForm);
                        fetch('/addEcu', {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            layer.msg(data.msg);
                            table.reload('ecuMapFeatureTable');
                            layer.close(index);
                        });
                    },
                    btn2: function (index, layero) {
                        layer.close(index);
                    }
                });
            };

            // 编辑ECU
            window.editEcu = function (ecu) {
                layer.open({
                    title: '编辑ECU',
                    type: 2,
                    content: '/editEcuForm?id=' + ecu.id,
                    area: ['650px', '680px'],
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index];
                        var submitForm = iframeWindow.document.getElementById('ecuForm');
                        var formData = new FormData(submitForm);
                        console.log('ecu.id=' + ecu.id);

                        fetch('/editEcu', {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            layer.msg(data.msg);
                            table.reload('ecuMapFeatureTable');
                            layer.close(index);
                        });
                    },
                    btn2: function (index, layero) {
                        layer.close(index);
                    }
                });
            };

            // 删除ECU
            window.deleteEcu = function (uid) {
                layer.confirm('确定要删除该零部件吗？', {
                    btn: ['确定', '取消']
                }, function () {
                    fetch(`/deleteEcu/${uid}`, {
                        method: 'DELETE'
                    })
                    .then(response => response.json())
                    .then(data => {
                        layer.msg(data.msg);
                        table.reload('ecuMapFeatureTable');
                    });
                }, function () {
                    layer.msg('已取消删除');
                });
            };
        });

        // 批量导入函数
        function uploadFile(fileInputId, tableName) {
            // 触发文件选择框的 click 事件
            document.getElementById(fileInputId).value = '';
            document.getElementById(fileInputId).click();

            // 监听文件选择框的 change 事件
            document.getElementById(fileInputId).onchange = function () {
                var fileInput = document.getElementById(fileInputId);
                var file = fileInput.files[0];
                if (!file) {
                    alert('请选择一个文件');
                    return;
                }

                var formData = new FormData();
                formData.append('file', file);
                formData.append('tableName', tableName);
                fetch('/upload', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    alert(data.msg);
                    // 如果上传成功，刷新表格
                    if (data.status === 'success') {
                        layui.table.reload('ecuMapFeatureTable');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('上传失败');
                });
            };
        }
    </script>
</body>
</html>